import {useEffect, useState} from "react";
import {SkuProductResponseDTO} from "@/types/SkuProductResponseDTO";
import {creditPayExchangeSku, querySkuProductListByActivityId} from "@/apis";

// @ts-ignore
export function SkuProduct({handleRefresh}) {
    const [SkuProductResponseDTOList, setSkuProductResponseDTOList] = useState<SkuProductResponseDTO[]>([]);

    const querySkuProductListByActivityIdHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const result = await querySkuProductListByActivityId(Number(queryParams.get('activityId')));

        const {code, info, data}: { code: string; info: string; data: SkuProductResponseDTO[] } = await result.json();

        if (code != "0000") {
            window.alert("查询产品列表，接口调用失败 code:" + code + " info:" + info)
            return;
        }
        setSkuProductResponseDTOList(data)
    }

    const creditPayExchangeSkuHandle = async (sku: number) => {
        const queryParams = new URLSearchParams(window.location.search);
        const result = await creditPayExchangeSku(String(queryParams.get('userId')), sku);
        const {code, info, data}: { code: string; info: string; data: boolean } = await result.json();

        if (code != "0000") {
            window.alert("对话抽奖次数，接口调用失败 code:" + code + " info:" + info)
            return;
        }

        const timer = setTimeout(() => {
            handleRefresh()
        }, 350);

        // 清除定时器，以防组件在执行前被卸载
        return () => clearTimeout(timer);

    }

    useEffect(() => {
        querySkuProductListByActivityIdHandle().then(r => {
        });
    }, [])

    return (
        <>

            <div className="w-full max-w-7xl px-2">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                    {SkuProductResponseDTOList.map((skuProduct, index) => (
                        <div
                            key={index}
                            className="group relative h-full transform transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
                        >
                            {/* 卡片容器 - 暗色玻璃质感 */}
                            <div className="h-full bg-gray-900/95 backdrop-blur-lg rounded-xl p-3 shadow-xl
                                  border border-gray-700/60 hover:border-cyan-400/40
                                  relative overflow-hidden
                                  before:absolute before:inset-0
                                  before:bg-[radial-gradient(at_top_right,_#4f46e530_0%,_transparent_70%)]
                                  flex flex-col transition-all duration-300">

                                {/* 霓虹边框效果 */}
                                <div className="absolute inset-0 rounded-xl
                                    shadow-[0_0_12px_-3px_rgba(79,70,229,0.3)]
                                    group-hover:shadow-[0_0_20px_-3px_rgba(34,211,238,0.4)]
                                    transition-shadow duration-300"/>

                                {/* 标题区域 - 霓虹光效文字 */}
                                <div className="mb-2 border-b border-gray-700/60 pb-2 relative z-10">
                                    <h3 className="text-lg md:text-xl font-bold text-center">
                              <span className="bg-gradient-to-r from-cyan-300 to-blue-400
                                             bg-clip-text text-transparent
                                             drop-shadow-[0_2px_3px_rgba(34,211,238,0.3)]">
                                {skuProduct.activityCount.dayCount}
                              </span>
                                        <span className="block mt-1 text-xs md:text-sm font-medium
                                  text-cyan-200/90 tracking-wide
                                  drop-shadow-[0_1px_2px_rgba(34,211,238,0.2)]">
                            抽奖次数🎲
                          </span>
                                    </h3>
                                </div>

                                {/* 价格区域 - 全息效果数字 */}
                                <div className="flex-grow flex flex-col justify-center">
                                    <div className="mb-3 text-center relative">
                                        <div className="inline-block bg-gradient-to-br from-gray-800 to-gray-900
                                            rounded-lg px-4 py-1.5 shadow-inner
                                            border border-gray-700/60">
                                <span className="text-base md:text-lg font-semibold
                                               bg-gradient-to-r from-cyan-200 to-blue-300
                                               bg-clip-text text-transparent
                                               drop-shadow-[0_2px_3px_rgba(34,211,238,0.3)]">
                                  {skuProduct.productAmount}⭐
                                </span>
                                        </div>
                                    </div>
                                </div>

                                {/* 兑换按钮 - 赛博朋克风格 */}
                                <div className="mt-auto relative z-10">
                                    <button
                                        onClick={() => creditPayExchangeSkuHandle(skuProduct.sku)}
                                        className="w-full flex items-center justify-center
                                       bg-gradient-to-r from-blue-500/90 to-cyan-500/90
                                       text-white px-4 py-2 rounded-md
                                       hover:shadow-[0_0_15px_-5px_rgba(34,211,238,0.6)]
                                       transition-all duration-300
                                       hover:scale-[1.02] active:scale-95
                                       font-medium text-xs md:text-sm
                                       border border-cyan-300/30
                                       relative overflow-hidden
                                       before:absolute before:inset-0
                                       before:bg-[linear-gradient(120deg,transparent_20%,rgba(255,255,255,0.1)_50%,transparent_80%)]
                                       before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-500"
                                        style={{minHeight: '30px'}}>
                                        <svg
                                            className="w-3.5 h-3.5 mr-1.5"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-1.4 7M17 13l1.4 7M9 21h6"
                                            />
                                        </svg>
                                        <span className="relative drop-shadow-[0_1px_1px_rgba(0,0,0,0.3)]">
                                立即兑换
                              </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

        </>
    )

}